<template>
	<view style="display: flex;">
		<scroll-view
			style="width: 200rpx; min-width: 200rpx;"
			scroll-y
			:style="{ height: windowHeight + 'px' }"
		>
			<view>
				<view
					v-for="(item, index) in hero"
					:key="index"
					style="border-bottom: 1px solid gray; padding: 6px;"
					:class="{ cur: index == current }"
					@click="getDetail(index)"
				>
					<text>{{ item.title }}</text>
				</view>
			</view>
		</scroll-view>

		<scroll-view
			scroll-y
			style="flex: 1;"
			:style="{ height: windowHeight + 'px' }"
			v-if="data && showDetail"
		>
			<view style="background-color: lightgray; padding: 4px;">
				<view style="display: flex;">
					<image
						:src="
							`https://game.gtimg.cn/images/lol/act/img/champion/${
								data.hero.alias
							}.png`
						"
						mode=""
						style="width: 200rpx; height: 200rpx;"
					></image>
					<view
						style="display: flex; flex-direction: column; margin-left: 10px;"
					>
						<text style="font-size: 1.2em;">{{ data.hero.title }}</text>
						<text>昵称:{{ data.hero.name }}</text>
						<text>金币:{{ data.hero.goldPrice }}</text>
						<text>点券:{{ data.hero.couponPrice }}</text>
					</view>
				</view>

				<!-- <uni-card title="背景故事" isFull isShadow>
					<view>
						<text style="font-size: 0.8em;">{{ data.hero.shortBio }}</text>
					</view>
				</uni-card> -->

				<!-- <uni-collapse>
					<uni-collapse-item title="使用建议" showAnimation>
						<view
							style="background-color: white; padding: 5px; border-bottom: 1px solid gray;"
							v-for="(item, index) in data.hero.allytips"
							:key="index"
						>
							<text>{{ item }}</text>
						</view>
					</uni-collapse-item>

					<uni-collapse-item title="对战技巧" showAnimation>
						<view
							style="background-color: white; padding: 5px; border-bottom: 1px solid gray;"
							v-for="(item, index) in data.hero.enemytips"
							:key="index"
						>
							<text>{{ item }}</text>
						</view>
					</uni-collapse-item>

					<uni-collapse-item title="皮肤">
						<uni-grid :column="3" :showBorder="false">
							<uni-grid-item v-for="(item, index) in data.skins">
								<view
									style="display: flex; justify-content: center; align-items: center;"
								>
									<image
										style="width: 160rpx; height:160rpx; border-radius: 4px;"
										:src="item.iconImg"
										mode=""
									></image>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-collapse-item>

					<uni-collapse-item title="技能">
						<uni-grid :column="3" :showBorder="false">
							<uni-grid-item v-for="(item, index) in data.spells">
								<view
									style="display: flex; justify-content: center; align-items: center;"
								>
									<image
										style="width: 160rpx; height:160rpx; border-radius: 4px;"
										:src="item.abilityIconPath"
										mode=""
									></image>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-collapse-item>
				</uni-collapse> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			hero: [],
			windowHeight: 0,
			current: 0, //当前项
			data: null,
			showDetail:true
		};
	},
	onReady() {
		this.getMenu();
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
	},
	methods: {
		getDetail(index) {
			this.current = index;
			const heroId = this.hero[index].heroId;

			const url = `https://game.gtimg.cn/images/lol/act/img/js/hero/${heroId}.js`;

			uni.request({
				url,
				success: res => {
					console.log(res);
					this.data = res.data;
					
					// 刷新右侧:
					// this.showDetail = false;
					// this.$nextTick(()=>{
					// 	this.showDetail = true;
					// })
				}
			});
		},
		getMenu() {
			uni.request({
				url:'https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js?v=50',
				success: res => {
					console.log(res);
					this.hero = res.data.hero;

					this.getDetail(0);
				}
			});
		}
	}
};
</script>

<style>
.cur {
	color: #007aff;
	background-color: lightgray;
}
</style>
